<template>
  <section class='f-register' :style="{'height': currentHeight + 'px'}">
    <van-sticky>
      <van-nav-bar class="f-nav-bar" title="实名信息">
        <template #left>
          <van-icon name="arrow-left" size="18" @click="pageBack" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <van-cell title="实名状态" :value="shopForm.certificationStatus">
      <template #value>
        <p :style="{'color': shopForm.certificationStatus == 0? '#FC8683': '##3273F4'}">
          {{shopForm.certificationStatus == 0? '未实名': '已实名'}}
        </p>
      </template>
    </van-cell>

    <van-form class="f-mt-15" @submit="alipayAuth" input-align="right" error-message-align="right">
      <van-cell-group>
        <van-field v-model="form.idCardName" name="idCardName" label="用户姓名" placeholder="请输入用户姓名"
          :rules="[{ required: true, message: '请填写用户姓名' }]" />

        <van-field v-model="form.shopUserPhone" name="shopUserPhone" label="联系电话" placeholder="请输入联系电话" maxlength="11"
          type="number" :rules="[{ required: true, message: '请填写联系电话' }]" />

        <van-field v-model="form.idCardNum" name="idCardNum" label="身份证号" type="tel" placeholder="请输入身份证号" maxlength="18"
          :rules="[{ required: true, message: '请填写身份证号' },
          { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请填写正确的证件号码'}]" />
      </van-cell-group>

      <!-- <van-field v-if="form.auditStatus == 1" class="f-mt-14" name="idcardUrl" label="文件上传"
        :rules="[{ required: true, message: '请上传证件照片' }]">
        <template #label>
          <p>上传证件照片</p>
          <p class="f-mt-05 f-fs-12 ">(身份证人像面)</p>
        </template>
        <template #input>
          <van-uploader v-model="form.idcardUrl" :after-read="afterRead" :max-count="1" :preview-size="['167px', '104px']">
            <img class="f-img1" src="@/assets/imgs/jhh_datum_pic01.png" alt="">
          </van-uploader>
        </template>
      </van-field>

      <van-field v-if="form.auditStatus == 2" class="f-mt-14" v-model="form.companyName" name="企业名称" label="企业名称"
        placeholder="请输入企业名称" :rules="[{ required: true, message: '请填写企业名称' }]" />
      <van-field v-if="form.auditStatus == 2" name="licenseUrl" label="文件上传" :rules="[{ required: true, message: '请上传上传营业执照' }]">
        <template #label>
          <p>上传营业执照</p>
        </template>
        <template #input>
          <van-uploader v-model="form.licenseUrl" :after-read="afterRead1" :max-count="1" :preview-size="['167px', '104px']">
            <img class="f-img1" src="@/assets/imgs/jhh_btn_bl.png" alt="">
          </van-uploader>
        </template>
      </van-field> -->

      <div class="f-tips">
        <p>温馨提示：</p>
        <p>1.请确保录入的实名信息真实有效，否则将影响您的佣金提现。</p>
      </div>

      <div class="f-submit-btn" v-if="shopForm.certificationStatus == 0">
        <van-button round block type="primary" native-type="submit">支付宝实名认证</van-button>
      </div>
    </van-form>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";
import api from './api'
import { getStore, successDeal, getUrlParam } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      shopForm: {},
      form: {
        "auditStatus": 1,
        "companyName": "",
        "contactsName": "",
        "idCardName": "",
        "idCardNum": "",
        "shopUserPhone": "",
        "source": 1
      },
      idcardUrl: '',
      licenseUrl: '',

      timer: null,
      currentHeight: ""
    })

    onMounted(() => {
      state.currentHeight = window.innerHeight
      getShopInfo()
    })

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.shopForm = res.data
      })
    }

    const afterRead = (params) => {
      params.status = 'uploading';
      params.message = '上传中...';

      const formData = new FormData();
      formData.append("file", params.file) // 这里填入你的file文件对象

      api.uploadLocalImg(formData).then(res => {
        params.status = 'done';
        state.idcardUrl = res.data.ossUrl
      }).catch(err => {
        params.status = 'failed';
        params.message = '上传失败';
      })
    };

    const afterRead1 = (params) => {
      params.status = 'uploading';
      params.message = '上传中...';

      const formData = new FormData();
      formData.append("file", params.file) // 这里填入你的file文件对象

      api.uploadImg(formData).then(res => {
        params.status = 'done';
        state.licenseUrl = res.data.ossUrl
      }).catch(err => {
        params.status = 'failed';
        params.message = '上传失败';
      })
    };

    // 支付宝实名认证
    const alipayAuth = () => {
      let json = {
        "idCardName": state.form.idCardName,
        "contactsName": state.form.idCardName,
        "idCardNum": state.form.idCardNum,
        shopUserPhone: state.form.shopUserPhone,
        auditStatus: 1,
        "source": 1
      }
      api.signApp(json).then(res1 => {
        console.log(res1.data)
        JsBridge.callHandler('alipayAuth', res1.data.infoStr, (res2) => {

          if (res2) {
            let data = JSON.parse(res2)
            successDeal(data.msg)
            let url = data.result.result
            let params = {
              "appId": getUrlParam('app_id', url),
              "authCode": getUrlParam('auth_code', url),
              "certVerifyId": res1.data.verifyId,
              "scope": getUrlParam('scope', url),
              "source": "111"
            }
            api.signNotify(params).then(response => {
              successDeal('支付宝实名认证成功！')
              setTimeout(() => {
                pageBack()
              }, 500)
            })
          }
        })
      })
    }

    const pageBack = () => {
      router.go(-1)
    };

    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })

    return {
      ...toRefs(state),
      afterRead,
      afterRead1,
      pageBack,
      alipayAuth,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-register {
  background: #f3f3f3;
  .f-cell {
    width: 375px;
    height: 53px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding: 20px 15px;
  }
  .f-mt-14 {
    margin-top: 14px;
  }
  .f-tips {
    padding: 31px 14px;
    font-size: 10px;
    color: #ff2b2b;
    p {
      //   padding-bottom: 5px;
      line-height: 20px;
    }
  }
  .f-submit-btn {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 0 62px;
  }
  .f-img1 {
    width: 167px;
    height: 104px;
  }
  .f-nav-bar {
    background: #000000;
  }
}
</style>